<template>
  <div class="ucenter app-space">
    <!-- header -->
    <!-- <van-nav-bar :border="false" :z-index="999" class="van-transparent">
      <template #left>
        <div class="city-flex">
          <van-icon name="location" />
          <span>石家庄</span>
        </div>
      </template>
      <template #right>
        <div class="menu-flex">
          <div class="menu-link">
            <van-icon name="scan" />
            <p>扫一扫</p>
          </div>
          <div class="menu-link">
            <van-icon name="chat-o" />
            <p>消息</p>
          </div>
        </div>
      </template>
    </van-nav-bar>-->
    <Header></Header>
    <!-- main -->
    <van-tabs v-model="tabactive" class="sign-tabs">
      <van-tab to="/SignIndex">
        <template #title>
          <span class="tab-span">找驾校</span>
        </template>
      </van-tab>
      <van-tab to="/SignIndex2">
        <template #title>
          <span class="tab-span">找教练</span>
        </template>
      </van-tab>
      <van-tab to="/SignIndex3">
        <template #title>
          <span class="tab-span">找陪练</span>
        </template>
        <div class="tab-wrap">
          <div class="tab-inner">
            <div class="tab-banner">
              <img src="../../assets/jiaxiao_banner.jpg" alt />
            </div>
          </div>
          <div class="tab-filter">
            <div class="tab-item">推荐</div>
            <div class="tab-item">口碑</div>
            <div class="tab-item">人气</div>
            <div class="tab-item">价格</div>
          </div>
          <div class="box-cells">
            <van-cell v-for="(item, i) in peilian" :key="i">
              <template #icon>
                <img @click="href('/AccPractice')" :src="item.pic" class="p-avatar" alt />
              </template>
              <template #title>
                <div @click="href('/AccPractice')">
                  <div class="pl-heading">
                    <div class="pl-name">{{item.title}}</div>
                    <div class="pl-age">10年教龄</div>
                  </div>
                  <div class="sch-raty">
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                    <span class="star">★</span>
                  </div>
                  <div class="pl-price">40元/小时</div>
                  <div class="pl-desc">正规公司手动挡优惠</div>
                </div>
              </template>
              <template #right-icon>
                <div @click="callPhone(item.Phone)" class="right-cell">
                  <i class="iconfont van-icon-tel"></i>
                </div>
              </template>
            </van-cell>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- footer -->
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "./Header";
import Footer from "../Footer";
export default {
  data() {
    return {
      tabactive: 2,
      active: 0,
      peilian: [
        {
          title: "陆教练",
          pic: require("../../assets/avatar.jpg"),
          Phone: "19930645342"
        },
        {
          title: "刘教练",
          pic: require("../../assets/avatar.jpg"),
          Phone: "13141331887"
        },
        {
          title: "王教练",
          pic: require("../../assets/avatar.jpg"),
          Phone: "19930645342"
        },
        {
          title: "畅通驾校",
          pic: require("../../assets/avatar.jpg"),
          Phone: "19930645342"
        }
      ]
    };
  },

  components: {
    Header,
    Footer
  },

  methods: {
    href(url) {
      this.$router.push({ path: url });
    },
    // 拨打电话功能
    callPhone(phoneNumber) {
      window.location.href = "tel://" + phoneNumber;
      console.log(this.Phone);
    }
  }
};
</script>
<style>
</style>
